<template>
    <div>
      <el-affix :offset="0">
        <Header :active="'/home'"/>
      </el-affix>
    </div>
  
    <el-carousel height="400px" style="width: 1300px;margin: 20px auto">
      <el-carousel-item v-for="item in imgesList" :key="item">
        <el-image :src="item" style="height: 400px;width: 1300px" fit="cover"/>
      </el-carousel-item>
    </el-carousel>
    <div>
      <Carousel v-on:search="searchEvent"/>
    </div>
    <div>
      <el-card style="width: 1300px;margin: 30px auto">
        <div class="content-slot flex-r flex-jc-sb flex-ac-fs flex-col">
          <div v-for="(item, index) in books" :key="index">
            <CardBooks :id="item.id" :image="item.image" :name="item.name" :auth="item.auth" :price="item.price"
                       :priceold="item.priceold" :active="item.active"/>
          </div>
        </div>
        <div class="w-100 flex-r flex-jc-c flex-ai-c m-t-20">
          <Pagination :total="this.books.length"/>
        </div>
      </el-card>
  
    </div>
    <div class="footer-box f-12 bg-primary">
      <Footer/>
    </div>
  </template>
  
  <script>
  import booksjson from '@/assets/json/books.json'
  import {mapState} from 'vuex'
  import {ElMessage} from 'element-plus'
  export default {
  name: 'Home',
  data() {
    return {
      books: booksjson,
      imgesList:[
          "https://img1.baidu.com/it/u=1667365889,2529452882&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=467",
          "https://images.uiiiuiii.com/wp-content/uploads/2018/08/i-bn20180826-1-13.jpg",
          "https://img.zcool.cn/community/01da11596c59a0a8012193a33ffd7b.png",
          "https://images.uiiiuiii.com/wp-content/uploads/2018/08/i-bn20180826-1-12.jpg",
      ]
    }
  },
  computed: {
    ...mapState({
      shopbooks: (state) => state.shopcar.shopbooks,
    })
  },
  methods: {
    searchEvent(data) {
      this.books = booksjson
      let search = this.books.filter(n => n.name == data)
      if (!search[0]) {
        ElMessage({
          message: '未找到相关花卉！',
          type: 'warning',
          offset: 80
        })
      } else {
        this.books = search
      }

    }
  },
  created() {
    if (this.shopbooks.length > 0 && this.books.length > 0) {
      const newdata = this.books.filter(n => this.shopbooks.every((val) => val.id != n.id))
      this.books = [...this.shopbooks, ...newdata]
    }
  }
}
</script>

<style lang="scss">
body {
  background-color: #cacaca55;
}

.footer-box {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
}

.content-slot {
  width: 100%;
  min-height: 330px;
  gap: 30px;
}
</style>